<template>
  <view class="my-container">
    <!-- 添加 header-card-wrapper 类 -->
    <view class="header-card-wrapper">
      <header-card 
        :isLogin="isLoggedIn"
        :userInfo="userInfo"
        @login="handleLogin"
      ></header-card>
    </view>

    <!-- 积分展示 -->
  <!--  <view class="points-card">
      <text class="points-text">我的积分：{{ points }}</text>
    </view> -->


    <!-- 使用工作统计组件 -->
    <my-work-stats
	  v-if="userInfo?.type === USER_TYPES.MAINTENANCE"
      :pendingCount="15"
      :completedCount="175"
      :showIncome="userInfo?.member?.role === MEMBER_ROLES.DIRECTOR"
      income="700,000"
      rate="23.5%"
    />

    <!-- 菜单列表 -->
    <view class="menu-list">
      <view class="menu-item" @click="handleMenuClick('company')" v-if="userInfo?.type === USER_TYPES.MAINTENANCE || userInfo?.type === USER_TYPES.GAS">
        <view class="menu-left">
          <image class="menu-icon" src="/static/my/my-org.png" mode="aspectFit"></image>
          <text class="menu-text" v-if ="userInfo?.type === USER_TYPES.GAS">所属加油站</text>
		  <text class="menu-text" v-else >所属公司</text>
        </view>
		 <image class="arrow" src="/static/my/my-right.png" mode="aspectFit"></image>
      </view>
      <view class="menu-item" v-if="userInfo?.member?.role == MEMBER_ROLES.DIRECTOR" @click="handleMenuClick('member')">
        <view class="menu-left">
          <image class="menu-icon" src="/static/my/my-user-agreement.png" mode="aspectFit"></image>
          <text class="menu-text">成员管理</text>
        </view>
		<image class="arrow" src="/static/my/my-right.png" mode="aspectFit"></image>
      </view>
      <view class="menu-item" v-if="userInfo?.type === USER_TYPES.MAINTENANCE" @click="handleMenuClick('security')">
        <view class="menu-left">
          <image class="menu-icon" src="/static/my/my-qualifications.png" mode="aspectFit"></image>
          <text class="menu-text">我的资质</text>
        </view>
        <image class="arrow" src="/static/my/my-right.png" mode="aspectFit"></image>
      </view>
      <view class="menu-item" @click="handleMenuClick('service')">
        <view class="menu-left">
          <image class="menu-icon" src="/static/my/my-online-service.png" mode="aspectFit"></image>
          <text class="menu-text">在线客服</text>
        </view>
        <image class="arrow" src="/static/my/my-right.png" mode="aspectFit"></image>
      </view>
      <view class="menu-item" @click="handleMenuClick('agreement')">
        <view class="menu-left">
          <image class="menu-icon" src="/static/my/my-user-agreement.png" mode="aspectFit"></image>
          <text class="menu-text">用户协议</text>
        </view>
        <image class="arrow" src="/static/my/my-right.png" mode="aspectFit"></image>
      </view>
    </view>

    <tabbar ref="tab" :activeIndex="activeTab"  @popLogin="popLogin"></tabbar>
  </view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue'
import { USER_TYPES,MEMBER_ROLES} from '@/service/api.js'
import { userStore } from '@/utils/userStore.js'
import { RouterMethods } from '../../utils/router'

const activeTab = ref(null)
const points = ref(5000)

// 登录状态
const isLoggedIn = ref(false)

// 用户信息
const userInfo = ref({})
// 处理登录事件
const handleLogin = () => {
  // 跳转到登录页面
  uni.navigateTo({
    url: '/pages/login/login'
  })
}

const selectedType = ref('')
onShow(() => {
 initUserInfo() 
 selectedType.value = userStore.getType()
 if (selectedType.value == USER_TYPES.CLIENT ||
 selectedType.value == USER_TYPES.SUPPLIER ) {
 	activeTab.value = 3
 } else {
 	activeTab.value = 4
 }	
})

onMounted(() => {
  //uni.hideTabBar()
  //initUserInfo()
})
// 初始化用户信息
const initUserInfo = () => {
  isLoggedIn.value = userStore.isLogin()
  const storedInfo = userStore.getUserInfo()
  console.log(JSON.stringify(storedInfo))
  if (storedInfo) {
    userInfo.value = storedInfo
  }
}
// const switchTab = (index, isLogin) => {
//   activeTab.value = index
// }

const handleMenuClick = (type) => {
  switch(type) {
    case 'company':
	  if (userInfo.value.type == USER_TYPES.GAS) {
		  RouterMethods.toMyCompanyGasStation()
	  } else {
		  RouterMethods.toMyCompanyRepairer()
	  }
      break
    case 'member':
	  RouterMethods.toMyMemberList()
      break
    case 'security':

      break
    case 'service':
    
      break
    case 'agreement':
      RouterMethods.toAgreement()
      break
  }
}
</script>

<style>
.my-container {
  min-height: 100vh;
/*  background-color:deeppink; */
  padding: 0 40rpx;
  padding-bottom: calc(120rpx + 244rpx + env(safe-area-inset-bottom));
}

/* 添加 header-card-wrapper 样式 */
.header-card-wrapper {
  padding-top: 40rpx;
}
/* 
.points-card {
  background: #F2B642;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.points-text {
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: bold;
} */

.menu-list {
  background: #FFFFFF;
}

.menu-item {
/*  background: red; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 56rpx;
  padding-left: 15rpx;
  padding-right: 15rpx;
  padding-bottom: 13rpx;
  border-bottom: 1px solid rgba(0,30,50,1);
}

.menu-left {
  display: flex;
  align-items: center;
}

.menu-icon {
  width: 34rpx;
  height: 34rpx;
  margin-right: 14rpx;
}

.menu-text {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

.arrow {
  width: 18rpx;
  height: 32rpx;
}
</style> 